<!--
 * @Descripttion: 
 * @Author: yuxi
 * @Date: 2022-09-15 14:58:04
 * @LastEditors: yuxi
 * @LastEditTime: 2023-08-25 22:19:51
-->
<template>
  <div class="map-container">
    <MiningMap :center="center" :zoom="zoom">
      <MiningTiandituLayer
        layerName="基础底图"
        :ak="key"
        @ready="ready"
        layerType="img_w"
      ></MiningTiandituLayer>
      <MiningVectorLayer
        :featureStyle="style"
        v-for="(layer, li) in layers"
        :key="li"
        :layerName="layer.layerName"
        :layerId="'v_' + li"
        ref="vlayer"
        @ready="reloadLayerControl"
      ></MiningVectorLayer>

      <MiningLayerControl ref="layerControl">
        <template #layer="{ layer, layer_index, properties }">
          <MiningLayerControlItem :layer="layer">
            <template #addon>
              <div>
                <span
                  v-if="layer_index > 0 && !properties.isLock"
                  @click="startDraw(layer)"
                  >添加要素</span
                >
              </div>
            </template>
          </MiningLayerControlItem>
        </template>
        <template #extend>
          <div class="add-btn">
            <el-button size="small" @click="handleAddLayer">添加图层</el-button>
          </div>
        </template>
      </MiningLayerControl>
    </MiningMap>
  </div>
</template>

<script>
import MiningMap from 'mining-map/Map'
import MiningTiandituLayer from 'mining-map/Layers/TiandituLayer'
import { TiandituKey } from '@/config/config.js';
import { Style, Stroke as StrokeStyle, Fill as FillStyle} from 'ol/style';
import MiningLayerControl from 'mining-map/Control/LayerControl';
import MiningLayerControlItem from 'mining-map/Control/LayerControlItem';
import MiningVectorLayer from 'mining-map/Layers/VectorLayer'

  
export default {
  name: 'LayerManager',
  title: '图层管理',
  parentTitle: '业务组件',
  components: {
    MiningMap,
    MiningTiandituLayer,
    MiningLayerControl,
    MiningLayerControlItem,
    MiningVectorLayer
  },
  data () {
    const style = new Style({
      stroke: new StrokeStyle({
        color: 'blue',
        lineDash: [4],
        width: 3,
      }),
      fill: new FillStyle({
        color: 'rgba(0, 0, 255, 0.1)',
      }) 
    })
    return {
      center: [116.43396401346438,39.926523711148874],
      zoom: 17,
      key: TiandituKey,
      draw: null,
      snap: null,
      select: null,
      layers: [],
      style
    }
  },
  methods: {
    // 地图初始化
    ready ({ map }) {
    },
    handleAddLayer () {
      console.log('addlayer')
      this.layers.push({
        layerId: 'layer_' + (this.layers.length + 1),
        layerName: '图层' + (this.layers.length + 1),
        type: 'vectorLayer'
      })
    },
    reloadLayerControl () {
      this.$refs.layerControl.load()
    },
    // 开始绘制
    startDraw(layer) {
      const layerId = layer.get('layerId')
      if(layerId) {
        const vlayer = this.$refs.vlayer.find(l => {
          return l.layerId === layerId
        })
        vlayer.startDraw('MultiLineString')
      }
    }
  }

}
</script>

<style lang="less">
body,
html {
  padding: 0;
  margin: 0;
}

.map-container {
  width: 100%;
  height: 100vh;
  text-align: left;
  .add-btn {
    padding: 20px;
    text-align: center;
  }
}
</style>